<template>
  <!-- 主页面，包括了路由以及其他页面的显示 -->
  <div class="home">
    <el-container>
      <el-aside width="300px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#A64C60"
        >
          <div class="fle">
            <img
              src="../assets/delta.jpg"
              alt=""
              @click="$router.push('/')"
            /><span style="font-size: 40px">manager</span>
          </div>
          <el-sub-menu
            v-for="(item, index) in list"
            :key="item.name"
            :index="index.toString()"
          >
            <template #title>
              <!-- <el-icon><location /></el-icon> -->
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(item1, index1) in item.children"
                :key="item1.name"
                :index="index + '-' + index1"
                @click="$router.push(item1.route)"
                >{{ item1.name }}</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="tit">欢迎使用本系统</div>
          <div class="username">
            <el-icon :size="20" color="black">
              <edit />
            </el-icon>
            {{ '用户名' }}
          </div>
        </el-header>
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      list: [],
    }
  },
  methods: {
    // 获取路由列表
    async getlist() {
      let { data: res } = await this.$request.get('getlist')
      this.list = res.list
      console.log(this.list)
    },
  },
  created() {
    this.getlist()
  },
}
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  .fle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px;
    img {
      width: 80px;
    }
  }

  .el-container {
    height: 100%;
    .el-aside {
      height: 100%;
      .el-menu {
        height: 100%;
        width: 100%;
      }
    }
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid gray;
    }
  }
}
</style>